<template>
  <SetNav :show="1" @addVisit="addVisit"></SetNav>
  <view class="container">
    <!-- 表单矩形框 -->
    <view class="form-box">
      <!-- 第一部分表单 -->

      <view class="form-section">
        <text class="label">旧 密 码</text>
        <input v-model="oldPassword" placeholder="请输入旧密码" class="form-input" />
      </view>

      <!-- 分割线 -->
      <view class="divider"></view>

      <!-- 第二部分表单 -->
      <view class="form-section">
        <text class="label">新 密 码</text>
        <input v-model="newPassword" placeholder="请输入8~12位密码" class="form-input" />
      </view>

      <!-- 分割线 -->
      <view class="divider"></view>
      <!-- 第三部分表单 -->
      <view class="form-section">
        <text class="label">确认密码</text>
        <input v-model="confirmPassword" placeholder="请再次确认密码" class="form-input" />
      </view>

      <!-- 最后两行小字 -->
      <view class="footer">
        <view class="footer-text"
          >1.请在联网状态下修改密码，如果忘记，请联系上级单位的管理人员找回密码</view
        >
        <view class="footer-text">2.密码必须同时包含英文大写，英文小写和数字</view>
      </view>

      <button type="primary" @tap="updatePassword" size="mini" class="my-button">修改</button>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue'
import SetNav from './SetNav.vue'
import { http } from '@/utils/http'
import { useMemberStore } from '@/stores/index'
import { loginout } from '@/services/login'
const MemberStore = useMemberStore()
const oldPassword = ref('')
const newPassword = ref('')
const confirmPassword = ref('')
const requiredOldPassword = MemberStore.profile.doctorInfo.password
const formData = ref({
  oldPassword: '',
  newPassword: '',
  confirmPassword: '',
})
//校验规则
const updatePassword = async () => {
  if (!oldPassword.value || !oldPassword.value || !confirmPassword.value) {
    uni.showToast({ icon: 'none', title: '有信息未输入' })
    return
  }
  http <any>({
      url:
        '/doctor/updatePassword?id=' +
        MemberStore.profile.doctorInfo.id +
        '&newPassword=' +
        newPassword.value,
      method: 'post',
    })
    
  await loginout()
  MemberStore.clearProfile()
  uni.navigateTo({ url: '/pages/login/login' })
}
</script>

<style scoped>
.my-button {
  margin-top: 60rpx;
  margin-bottom: 50rpx;
  width: 120rpx;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #02abf3; /* 红色背景 */
  color: #ffffff; /* 白色文字 */
  border-radius: 10rpx; /* 可选：圆角 */
}

.container {
  padding: 10rpx; /* 设置页面内边距 */
}

.form-box {
  background-color: #fff; /* 设置矩形框背景色 */
  border-radius: 10rpx; /* 设置矩形框圆角 */
  box-shadow: 0 0 10rpx rgba(0, 0, 0, 0.1); /* 设置阴影效果 */
  padding: 10rpx; /* 设置矩形框内边距 */
}

.form-section {
  display: flex; /* 设置为弹性布局 */
  align-items: center; /* 垂直居中对齐 */
  border-bottom: 1rpx solid #ccc; /* 分割线，灰色边框 */
  padding-bottom: 10rpx; /* 设置下边距，确保分割线不贴底部 */
}

.label {
  font-weight: bold; /* 设置字体为黑体 */
  font-size: 10rpx; /* 设置字体大小与输入框一样 */
  margin-right: 10rpx; /* 设置右侧间距 */
}

.form-input {
  flex: 1; /* 输入框填充剩余空间 */
  border: none; /* 去除输入框边框 */
  outline: none; /* 去除输入框轮廓 */
  font-size: 14rpx; /* 设置输入框字体大小与黑体字一样 */
}

.divider {
  height: 10rpx; /* 设置分割线高度 */
}

.footer {
  margin-top: 10rpx; /* 设置上边距 */
  text-align: left; /* 文本居中对齐 */
}

.footer-text {
  margin: 5rpx 0; /* 设置上下边距 */
  font-size: 12rpx; /* 设置字体大小 */
  color: #999; /* 设置字体颜色 */
}
</style>
